<template>
	<view style="display: flex; background-color: #FFF; margin-top: 20rpx; padding-bottom: 20rpx;">
		<view style=" padding: 42rpx 20rpx 0 32rpx;">
			<slot></slot>
		</view>
		<view style=" padding: 0 10rpx; margin-right: 50rpx; position: relative;">
			<view style="display: flex;align-items: center; margin-top: 24rpx; margin-bottom: 16rpx;">
				<image :src="icon" style="width: 60rpx; height: 60rpx;border-radius: 50%;">
				</image>
				<view style="margin-left: 20rpx;">{{childName}}</view>
			</view>
			<image style="width: 134rpx; height: 136rpx; position: absolute; top: 0;right: 0; z-index: 1;"
				src="">
			</image>
			<view style="padding: 10rpx; position: relative; z-index: 2;border-radius: 8rpx;
				background: #F8F9FC;">
				<view v-for="(item, index) in items">
					<view style="display: flex; align-items: center; font-size: 28rpx; margin: 20rpx 0;"
						@click="downloadDoc(item.fileUrl)">
						<!-- <view style="flex-shrink: 0;">{{item.type==0?"观察记录:":"学期评估:"}}</view> -->
						<view style="flex-shrink: 0;">{{item.name}}</view>
						<view
							style="flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 450rpx;">
							{{item.fileUrl}}
						</view>
						<view style="flex-shrink: 0; margin-left: 10rpx;">{{item.createTime}}</view>
					</view>

				</view>
			</view>
		</view>
		<view class="progress-container" v-if="isShowProgress">
			<view class="progress-box">
				<view class="text">文件下载中，请稍后......</view>
				<progress :percent="progress" show-info stroke-width="3" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "rf-mdocCell",
		props: {
			name: {
				type: String,
				required: false
			},
			icon: {
				type: String,
				required: true,
				default: ""
			},
			childName: {
				type: String,
				required: false,
				default: "无名"
			},
			items: {
				type: Array,
				required: false,
				default: [],
			},
		},
		data() {
			return {
				isShowProgress: false,
				progress: 0,
			};
		},
		methods: {
			downloadDoc(url) {
				const downloadTask = uni.downloadFile({
					url: url,
					success: res => {
						if (res.statusCode === 200) {
							this.isShowProgress = false;
							console.log('下载成功');
						}
						let that = this;
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: function(red) {
								that.isShowProgress = false;
								uni.showModal({
									title: '提示',
									content: '文件已保存：' + red.savedFilePath,
									cancelText: '我知道了',
									confirmText: '打开文件',
									success: function(res) {
										if (res.confirm) {
											uni.openDocument({
												filePath: red.savedFilePath,
												success: (sus) => {
													console.log('成功打开');
												}
											})
										}
									}
								});
							}
						});
					}
				})

				downloadTask.onProgressUpdate((res) => {
					if (res.progress > 0) {
						this.isShowProgress = true;
					}
					this.progress = res.progress;
					console.log('下载进度：' + res.progress);
					console.log('已下载长度：' + res.totalBytesWritten);
					console.log('文件总长度：' + res.totalBytesExpectedToWrite);
				})
			}
		}

	}
</script>

<style lang="scss">
	.progress-container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background: rgba(0, 0, 0, .2);
		width: 750rpx;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;

		.progress-box {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;

			.text {
				margin-bottom: 20rpx;
			}
		}
	}
</style>